<template>
  <el-aside class="homeAsideNav scrollbar" :style="AsideStyle">
         <i :class="className"  @click="ToggleNavStyle" class="baseStyle" style="font-size:18px"></i>
    <el-menu
      :collapse="isCollapse"
      :default-active="this.$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      router
      @close="handleClose">
      

      <el-menu-item index="/dataStatisticsView">
        <i class="el-icon-data-analysis"></i>
        <span slot="title">数据看板</span>
      </el-menu-item>

      <el-menu-item index="/stockInManageView">
        <i class="el-icon-box"></i>
        <span slot="title">入库管理</span>
      </el-menu-item>

       <el-menu-item index="/stockOutManageView">
        <i class="el-icon-truck"></i>
        <span slot="title">出库管理</span>
      </el-menu-item>

      <el-menu-item index="/partsManageView">
        <i class="el-icon-cpu"></i>
        <span slot="title">配件管理</span>
      </el-menu-item>

      <el-menu-item index="/wareHouseManageView">
        <i class="el-icon-takeaway-box"></i>
        <span slot="title">仓库管理</span>
      </el-menu-item>
       <el-menu-item index="/farmManageView">
        <i class="el-icon-set-up"></i>
        <span slot="title">车间管理</span>
      </el-menu-item>


       <el-submenu index="/">
         <template slot="title">
           <i class="el-icon-setting"></i>
           <span slot="title" style="fontSize:16px">系统管理</span>
         </template>
        
          <el-menu-item index="/personManageView">
            <i class="el-icon-user-solid"></i>
            <span slot="title">人员管理</span>
          </el-menu-item>
          <el-menu-item index="/roleManageView">
            <i class="el-icon-s-custom"></i>
            <span slot="title">角色管理</span>
          </el-menu-item>
        
       </el-submenu>
   
    </el-menu>
    
    
  </el-aside>

</template>

<script>
export default {
  name:'homeAsideNav',
  props: {

  },
  components: {

  },
  data() {
    return {
        screenWidth: window.innerWidth,
        isCollapse: false,
        className:'el-icon-s-fold',
        AsideStyle:{
            width:'200px',
        }
        
    };
  },
  computed: {

  },
  watch: {
    

  },
  created() {
      if(this.screenWidth<=500){
        this.isCollapse=true
        this.className='el-icon-s-unfold'
        this.AsideStyle.width='65px'
      }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
      window.screenWidth = window.innerWidth
      //console.log(window.screenWidth);
      //this.screenWidth=window.screenWidth
      if(window.screenWidth<=500){
        this.isCollapse=true
        this.className='el-icon-s-unfold'
        this.AsideStyle.width='65px'
      }
    })()
    }

  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },

    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    ToggleNavStyle(){
        if(this.isCollapse){
            this.isCollapse=false
            this.className='el-icon-s-fold'
            this.AsideStyle.width='200px'
        }else{
            this.isCollapse=true
            this.className='el-icon-s-unfold'
            this.AsideStyle.width='65px'
        }
    }
  },
};
</script>

<style scoped lang="scss">

.homeAsideNav {
    height: 100%;
    min-width: 65px;
    background-color: #fff;
    position: relative;
    transition: all .3s;
    overflow: auto;
}


.el-menu-vertical-demo {
    height: calc(100vh - 69.6px);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 199px;
    
  }

.el-menu-item {
    font-size: 16px !important;
}

.baseStyle {
    position:absolute;
    bottom:16px;
    cursor: pointer;
    z-index: 1;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transition: transform .6s;
    -webkit-transition: transform .6s;
    
}
.baseStyle:hover {
    color: $PrimaryColor;
}

@media screen and (max-height: 580px) , (max-width: 500px){
  .baseStyle {
      display: none;
  }
}


</style>
